<template>
  <div class="subMenu">
    <div v-for="route in sideMenu">
      <!-- 嵌套菜单 -->
      <el-submenu index="1" v-if="route.children && route.children.length > 0">
        <template slot="title">
          <i class="route.meta['icon']?route.meta['icon']:''"></i>
          <span>仓库管理</span>
        </template>
        <!-- 嵌套在subMenu中使用 -->
        <el-menu-item-group>
          <!-- <el-menu-item index="1-1">选项1</el-menu-item> -->
          <!-- 递归  查看选项中是否有children子菜单-->
          <sub-menu :sideMenu="route.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>
      <!-- 一级菜单 -->
      <el-menu-item v-else @click="jump(route)" :index="route.meta.fullPath">
        <i class="route.meta['icon']?route.meta['icon']:''"></i>
        <span slot="title">{{ route.meta.name }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "sub-menu",
  props: {
    sideMenu: {
      //接受的参数是一个符合routes配置选项的数组
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    jump(route) {
      // 判断route的meta属性中有没有fullPath属性、
      if (route.meta["fullPath"]) {
        return;
      }
      this.$router.push({ name: route.name });
    },
  },
};
</script>
